<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>

		<div id="vm1" v-bind:class="color">
			<p> {{message}}</p>

			<button :class="color" @click="clickSelected">点击更改颜色</button>
			<button v-bind:class="color"  v-on:click="clickSelected">点击更改颜色</button>
		</div>

	</body>

	<script type="text/javascript">
		var data = {
			message: '动态绑定属性',
			color: 'red',
			selected: false
		}

		var vm1 = new Vue({
			el: '#vm1',
			data: data,
			methods: {
				clickSelected: function() {
					console.log('this.selected = '+this.selected)
					this.selected = !this.selected;
					this.color = this.selected ? 'blue':'red';
					
				}

			}
		})

		// vm1.$data.color = 'blue'
	</script>

	<style type="text/css">
		.red {
			color: #FF0000;
		}

		.blue {
			color: #0000FF;
			font-size: 20px;
		}
	</style>
</html>
